<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-radio-group v-model="dateRange" size="medium" @change="dateRangeRadioChanged">
          <el-radio-button label="近一年" />
          <el-radio-button label="当年至今" />
          <el-radio-button label="全部" />
          <el-radio-button label="自定义时间段" />
        </el-radio-group>
      </el-col>
      <el-col :span="12">
        <div v-show="!disableDateSelect" style="margin-top: 5px;">
          <el-date-picker
            v-model="dateSelect"
            :disabled="disableDateSelect"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="4">
        <el-card class="box-card" style="height: 100px;">
          <div style="text-align: center"> <span class="hl_title">采购次数</span></div>
          <div class="hl_data_layout"> <span class="hl_data">{{ purchaseCount }}</span> </div>
        </el-card>
      </el-col>
      <el-col :span="1" style="height: 100px;" />
      <el-col :span="4">
        <el-card class="box-card" style="height: 100px;">
          <div style="text-align: center"> <span class="hl_title">采购金额</span></div>
          <div class="hl_data_layout"> <span id="" class="hl_data">{{ totalAmount }}</span> </div>
        </el-card>
      </el-col>
      <el-col :span="1" style="height: 100px;" />
      <el-col :span="4">
        <el-card class="box-card" style="height: 100px;">
          <div style="text-align: center"> <span class="hl_title">已付款金额</span></div>
          <div class="hl_data_layout"> <span class="hl_data">{{ paid }}</span></div>
        </el-card>
      </el-col>
      <el-col :span="1" style="height: 100px;" />
      <el-col :span="4">
        <el-card class="box-card" style="height: 100px;">
          <div style="text-align: center"> <span class="hl_title">未付款</span></div>
          <div class="hl_data_layout"> <span class="hl_data">{{ nonPayment }}</span></div>
        </el-card>
      </el-col>
      <el-col :span="1" style="height: 100px;" />
      <el-col :span="4">
        <el-card class="box-card" style="height: 100px;">
          <div style="text-align: center"> <span class="hl_title">待报销</span></div>
          <div class="hl_data_layout"> <span class="hl_data">{{ waitForReimbursement }}</span> </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;" :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <chart ref="chart1" style="height: 350px;width: 450px;" :options="c1option" :autoresize="true" theme="wonderland" />
        </el-card>

      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <chart ref="chart1" style="height: 350px;width: 450px;" :options="c2option" :autoresize="true" theme="wonderland" />
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="box-card">
          <chart ref="chart3" style="height: 300px;width: 950px;" :options="monthlyOption" :autoresize="true" theme="wonderland" />
        </el-card>

      </el-col>
    </el-row>

  </div>
</template>
<style>
  .hl_title {
    font-size: 1.2em;
    color: #1f2d3d;
  }
  .hl_data {
    font-size: 1.6em;
    color: #FFBA00;
  }
  .hl_data_layout {
    text-align: center;
    margin-top: 10px;
  }
</style>
<script>
import { getAction } from '@/api/manage'
export default {
  name: 'PurchaseCalendar',
  components: {
  },
  data() {
    return {
      purchaseCount: 0,
      totalAmount: 0,
      paid: 0,
      waitForReimbursement: 0,
      nonPayment: 0,
      dateSelect: '',
      dateRange: '近一年',
      c1option: {
        title: {
          text: '供应商采购金额'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        visualMap: {
          show: false,
          orient: 'horizontal',
          left: 'center',
          min: 200,
          max: 2000,
          text: ['一级', '二级', '三级', '四级', '五级', '六级'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', '#d0648a']
          }
        },
        xAxis: {
          type: 'value',
          max: 7500000,
          splitLine: {
            show: false // 想要不显示网格线，改为false
          },
          axisLabel: {
            interval: 2,
            rotate: 40
          }
        },
        yAxis: {
          type: 'category',
          data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7', 'x8', 'x9', 'x10'],
          splitLine: {
            show: false // 想要不显示网格线，改为false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            data: [200, 205, 309, 605, 1002, 1400, 2000, 2000, 2000, 2000]
          }
        ]
      },
      c2option: {
        title: {
          text: '项目采购金额'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        visualMap: {
          show: false,
          orient: 'horizontal',
          left: 'center',
          min: 200,
          max: 2000,
          text: ['一级', '二级', '三级', '四级', '五级', '六级'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', '#d0648a']
          }
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false // 想要不显示网格线，改为false
          },
          axisLabel: {
            interval: 2,
            rotate: 40
          }
        },
        yAxis: {
          type: 'category',
          data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7', 'x8', 'x9', 'x10'],
          splitLine: {
            show: false // 想要不显示网格线，改为false
          },
          axisLabel: {
            formatter: function(params) { // 标签输出形式 ---请开始你的表演
              if (params.length > 15) {
                return params.substring(0, 15) + '...'
              } else {
                return params
              }
            }
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            data: [200, 205, 309, 605, 1002, 1400, 2000, 2000, 2000, 2000]
          }
        ]
      },
      monthlyOption: {
        title: {
          text: '月采购统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['采购金额', '采购次数']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: ['2019-10-21', '2019-10-22', '2019-10-23', '2019-10-24', '2019-10-25', '2019-10-26', '2019-10-27', '2019-10-28', '2019-10-29', '2019-10-30', '2019-10-31', '2019-11-01', '2019-11-02', '2019-11-03', '2019-11-04']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '采购金额',
            splitLine: {// 不显示分割线
              show: false
            },
            axisLabel: {
              formatter: '￥{value}'
            }
          },
          {
            type: 'value',
            name: '采购次数',
            axisLabel: {
              formatter: '{value}次'
            },
            min: 0,
            max: 40,
            splitLine: {
              show: false
            }
          }
        ],
        series: [{
          name: '采购次数',
          type: 'bar',
          stack: '采购次数',
          yAxisIndex: 1,
          data: [20, 10, 32, 30, 12, 31, 12, 12, 12, 12, 12, 32, 32, 32, 32]
        },
        {
          name: '采购金额',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#f1bb4c'
            }
          },
          yAxisIndex: 0,
          data: [2003, 1003, 3012, 3012, 3012, 3012, 3012, 3012, 3012, 3012, 3012, 3012, 3012, 3012, 3012]
        }
        ]
      }

    }
  },
  computed: {
    disableDateSelect: function() {
      return this.dateRange !== '自定义时间段'
    }
  },
  beforeCreate() {

  },
  created() {
    this.initBaseInfo()
  },
  methods: {
    search() {
      if (this.dateRange === '自定义时间段' && this.dateSelect !== '') {
        console.log(this.dateSelect)
        this.initBaseInfo()
      }
    },
    dateRangeRadioChanged() {
      if (this.dateRange !== '自定义时间段') {
        this.initBaseInfo()
      }
    },
    getDateRangeParam() {
      if (this.dateRange === '自定义时间段') {
        return { startDate: this.dateSelect[0], endDate: this.dateSelect[1] }
      } else if (this.dateRange === '近一年') {
        let start = ''
        const now = new Date()
        if (now.getMonth() === 11) {
          start = now.getFullYear() + '-01-01'
        } else {
          start = (now.getFullYear() - 1) + '-' + (now.getMonth() < 8 ? '0' + (now.getMonth() + 2) : (now.getMonth() + 2)) + '-01'
        }
        return { startDate: start }
      } else if (this.dateRange === '当年至今') {
        const now = new Date()
        const start = now.getFullYear() + '-01-01'
        return { startDate: start }
      } else {
        return {}
      }
    },
    initBaseInfo() {
      const param = this.getDateRangeParam()
      console.log(param)
      getAction('/purchase/generalstat/supplierStat', param).then(res => {
        const { data } = res
        const key = []
        const value = []
        if (data !== undefined && data.length > 0) {
          let c = 0
          for (var k in data) {
            if (c > 10) {
              break
            }
            if (data[k].supplierName.indexOf('有限公司') !== -1) {
              key.push(data[k].supplierName.substring(0, data[k].supplierName.indexOf('有限公司')))
            } else {
              key.push(data[k].supplierName)
            }
            value.push(data[k].purchaseAmount)
            c++
          }
          this.c1option.visualMap.max = value[0]
          this.c1option.xAxis.max = value[0] * 1.05
          this.c1option.visualMap.min = value[value.length - 1]
        }
        this.c1option.yAxis.data = key.reverse()
        this.c1option.series[0].data = value.reverse()
      })
      getAction('/purchase/generalstat/projectStat', param).then(res => {
        const { data } = res
        const key = []
        const value = []
        if (data !== undefined && data.length > 0) {
          let c = 0
          for (var k in data) {
            if (c > 10) {
              break
            }
            key.push(data[k].projectName)
            value.push(data[k].purchaseAmount)
            c++
          }
          this.c2option.visualMap.max = value[0]
          this.c2option.visualMap.min = value[value.length - 1]
        }
        this.c2option.yAxis.data = key.reverse()
        this.c2option.series[0].data = value.reverse()
      })
      getAction('/purchase/generalstat/monthlyPurchaseStat', param).then(res => {
        const { data } = res
        const dateStr = []
        const y1 = []
        const y2 = []
        if (data !== undefined && data.length > 0) {
          for (var i in data) {
            dateStr.push(data[i].month)
            y1.push(data[i].purchaseCount)
            y2.push(data[i].purchaseAmount)
          }
        }
        this.monthlyOption.xAxis[0].data = dateStr
        this.monthlyOption.series[0].data = y1
        this.monthlyOption.series[1].data = y2
      })
      getAction('/purchase/generalstat/total', param).then(res => {
        const { data } = res
        console.log(data)
        this.paid = data.paid === null ? 0 : this.beautify(data.paid)
        this.purchaseCount = data.purchaseCount === null ? 0 : data.purchaseCount
        this.totalAmount = data.totalAmount === null ? 0 : this.beautify(data.totalAmount)
        this.waitForReimbursement = data.waitForReimbursement === null ? 0 : this.beautify(data.waitForReimbursement)
        this.nonPayment = data.nonPayment === null ? 0 : this.beautify(data.nonPayment)
      })
    },
    beautify(value) {
      if (value > 10000) {
        return (value / 10000).toFixed(2) + '万'
      } else {
        return value.toFixed(1)
      }
    }
  }
}
</script>
